<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import ChartG2 from '@/components/ChartG2.vue' // AntV G2 图表组件

// 数据类别指标 按钮
const btnList = [
  {
    key: 'population',
    label: '人口数据',
    icon: 'icon-renkoumidu',
    content: ['人口总量', '人口密度', '人口增长率'],
  },
  {
    key: 'medical',
    label: '医疗设施',
    icon: 'icon-quanshiyiliaosheshi',
    content: ['医院数量', '床位数', '医疗资源'],
  },
  {
    key: 'staff',
    label: '职业员工',
    icon: 'icon-bailing',
    content: ['职业员工数量', '职业员工比例', '职业员工结构'],
  },
  {
    key: 'company',
    label: '企业机构',
    icon: 'icon-qiye-A',
    content: ['企业机构数量', '企业机构类型', '企业机构活跃度'],
  },
  { key: 'business', label: '商业经营', icon: 'icon-hotBrand', content: ['商业经营活跃度'] },
]

// 当前激活的按钮 index
const activeIndex = ref(null)

// 三角指针位置逻辑
const BTN_HEIGHT = 70 // 按钮高度
const pointerTop = computed(() => activeIndex.value * BTN_HEIGHT + BTN_HEIGHT / 2)
// 三角指针旁 内容面板逻辑
const panelContent = computed(() => {
  if (activeIndex.value !== null) {
    return btnList[activeIndex.value].content
  } else {
    return []
  }
})

// 点击空白处，关闭面板
const iconPanelRef = ref(null) // 按钮组
const contentPanelRef = ref(null) // 内容面板
const clickOutside = (e) => {
  const iconPanel = iconPanelRef.value
  const contentPanel = contentPanelRef.value
  // 如果点击了侧边栏和面板，什么都不做，否则收起面板
  if (iconPanel && (iconPanel === e.target || iconPanel.contains(e.target))) return
  if (contentPanel && (contentPanel === e.target || contentPanel.contains(e.target))) return

  // console.log('clickOutside', e.target)
  activeIndex.value = null
}
onMounted(() => {
  document.addEventListener('click', clickOutside)
})
onBeforeUnmount(() => {
  document.removeEventListener('click', clickOutside)
})

// 右侧图表 G2
const showChart = ref(false) // 是否显示图表
</script>

<template>
  <!-- 数据类别指标 指标选择器 可以用来切换图表  放在左侧-->
  <div class="sidebar">
    <div class="icon-panel" ref="iconPanelRef">
      <button
        v-for="(btn, index) in btnList"
        :key="btn.key"
        class="icon-btn"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index"
      >
        <i class="iconfont" :class="btn.icon"></i>
      </button>

      <!-- 指针 三角形 相对于icon-panel绝对定位 -->
      <div v-if="activeIndex !== null" class="pointer" :style="{ top: pointerTop + 'px' }"></div>

      <!-- 内容面板 相对于icon-panel绝对定位 -->
      <div
        class="content-panel"
        ref="contentPanelRef"
        v-show="panelContent.length"
        :style="{ top: pointerTop + 'px', transform: 'translateY(-50%)' }"
      >
        <ul>
          <!-- 内容根据点击的按钮切换 -->
          <li v-for="item in panelContent" :key="item" @click="showChart = true">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 图表内容 AntV G2 放在右侧-->
  <Transition>
    <div class="right-chart" v-show="showChart">
      <div class="close" @click="showChart = false">
        <i class="iconfont icon-guanbi"></i>
      </div>
      <!-- 传入空数据，组件内有默认示例数据 -->
      <ChartG2 type="bar" :data="[]" :autoFit="true" :width="430" :height="250" />
      <ChartG2 type="pie" :data="[]" :autoFit="true" :width="430" :height="250" />
      <ChartG2 type="area" :data="[]" :autoFit="true" :width="430" :height="250" />
    </div>
  </Transition>
</template>

<style scoped>
.sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 369px;
  margin: 0 20px;
  border-radius: 30px;
  background-image: linear-gradient(to bottom, rgb(38, 198, 218), rgb(66, 165, 245));
  z-index: 10;
}
/* 按钮 */
.sidebar .icon-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  .icon-btn {
    display: grid;
    place-items: center;
    height: 70px;
    .iconfont {
      font-size: 30px;
      color: white;
    }
  }
}
/* 首按钮圆角 */
.sidebar .icon-panel .icon-btn:first-child {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
/* 末按钮圆角 */
.sidebar .icon-panel .icon-btn:last-of-type {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.icon-btn:hover,
.icon-btn.active {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 指针 三角形 */
.pointer {
  position: absolute;
  right: -20px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 11.5px solid transparent;
  border-bottom: 11.5px solid transparent;
  border-right: 20px solid rgba(0, 0, 0, 0.8);
}
/* 面板内容 */
.content-panel {
  position: absolute;
  left: 80px;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 30px;
  border-radius: 10px;
  cursor: pointer;
}
.content-panel ul li {
  display: inline-block;
  color: gray;
  width: auto;
  padding: 10px 0;
  border-bottom: 1px solid gray;
  white-space: nowrap; /* 禁止中文拆字换行 */
}
.content-panel ul li:hover {
  color: white;
}

/* 右侧图表 */
.right-chart {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 460px;
  /* height: 1050px; */
  background-color: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border: 1px solid gray;
  border-radius: 3px;
  z-index: 1000;
}
/* 右侧关闭按钮 */
.right-chart .close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1001;
}
.right-chart .close .iconfont {
  font-size: 25px;
  color: gray;
}
/* 图表消失过渡 */
.right-chart.v-enter-active,
.right-chart.v-leave-active {
  transition: all 0.5s ease;
}
.right-chart.v-enter-from,
.right-chart.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>
